<!-- 单位选择组件，单选 -->
<template>
  <van-action-sheet v-model="showCompo" title="部门">
    <view class="tree-container">
      <van-field
          v-model="filterText"
          label=""
          placeholder="输入关键字进行过滤"
          :clearable="true"
      />
      <ly-tree :tree-data="treeData"
               :props="props"
               ref="tree"
               node-key="deptId"
               show-checkbox
               checkOnClickNode
               checkStrictly
               :default-expanded-keys="expandKeys"
               @check="handleCheck"
               @check-change="handleCheckChange"
               :filter-node-method="filterNode"
               child-visible-for-filter-node
      />
    </view>
    <view class="padding-top-lg padding-bottom-lg">
      <van-row type="flex" justify="space-around">
        <van-col span="10">
          <van-button type="info" round plain hairline block @click="closeSheet">取消</van-button>
        </van-col>
        <van-col span="10">
          <van-button type="info" round block @click="saveSheet">确定</van-button>
        </van-col>
      </van-row>
    </view>
  </van-action-sheet>
</template>

<script>

export default {
  props: {
    forwardState: {
      type: Boolean,
      default: false
    },
    // 类型 1主送 3抄送 4分送
    tagType: {
      type: Number,
      default: 1
    },
    checkedVal: {
      type: String,
      default: ''
    },

  },

  data() {
    return {
      showCompo: false,//当前组件是否显示
      expandKeys: [],//默认展开的节点-对应的deptId的值
      props: function () {
        return {
          label: 'deptName', // 指把数据中的‘personName’当做label也就是节点名称
          children: 'children' // 指把数据中的‘childs’当做children当做子节点数据
        }
      },
      filterText: '',
      treeData: [],
      deptName: [],//选中的单位信息
      deptCode: [],//选中的单位信息
    }
  },
  mounted() {

  },
  watch: {
    forwardState(val) {
      this.showCompo = val
      this.getOrgTree();
    },
  },
  methods: {
    // 关闭sheet
    closeSheet() {
      this.$emit('closeSheet', this.tagType)
    },
    // 保存
    saveSheet() {
      let orgInfo = {
        tagType: this.tagType,
        orgName: this.deptName.toString(),
        // deptCode: this.deptCode.toString()
      }
      this.$emit('saveSheet', orgInfo)
    },

    // 只有在"点击"修改的指定节点会触发(也就是说这个方法只会触发一次)，obj中包含当前选中
    handleCheck(obj) {
      // obj: {
      // 	checkedKeys: [9, 5], // 当前选中节点的id数组
      // 	checkedNodes: [{...}, {...}], // 当前选中节点数组
      // 	data: {...}, // 当前节点的数据
      // 	halfCheckedKeys: [1, 4, 2], // 半选中节点的id数组
      // 	halfCheckedNodes: [{...}, {...}, {...}], // 半选中节点的数组
      // 	node: Node {...} // 当前节点实例
      // }

      // console.log('handleCheck', obj);
    },

    // 只要节点的选中状态改变就触发（包括设置默认选中，点击选中/取消选中），会被触发多次
    handleCheckChange(obj) {
      if (obj.checked == true) {
        this.deptName.push(obj.data.deptName)
        this.deptCode.push(obj.data.deptId)
      } else {
        this.deptName.splice(this.deptName.indexOf(obj.data.deptName), 1)
        this.deptCode.splice(this.deptCode.indexOf(obj.data.deptId), 1)
      }
      console.log('this.deptName', this.deptName.toString());
      console.log('this.deptCode', this.deptCode.toString());
    },

    handleNodeClick(obj) {
      // console.log('handleNodeClick', JSON.stringify(obj));
      // console.log('getNodePath', this.$refs.tree.getNodePath(obj.data));
    },

    // 呈报单位查询
    filterNode(value, data) {
      if (!value) return true;
      return data.deptName.indexOf(value) !== -1;
    },
    // 加载呈报单位树
    getOrgTree() {
      this.deptName = []
      this.deptCode = []
      this.$http({
        url: this.$http.adornUrl(`/caac/sequence/orgDeptTree`),
        method: 'get',
        params: this.$http.adornParams({
          'systemKey': this.cache.get('userInfo').systemKey,//固定值
          'systemFlag': this.cache.get('userInfo').systemFlag,//固定值
          // 'showNode': '',
          // 'hideNode': ''
        })
      }).then(({data}) => {
        if (data.code == 200) {
          this.treeData = this.util.treeDataTranslate(data.data, 'deptId', 'parentId')
          console.log("treeData: " + JSON.stringify(data.data));
        }
      })
    },
  }
}
</script>

<style>
.van-action-sheet{
  z-index: 9999;
  min-height: 80%;
}
</style>
